<template>
<view>
<view class="container font_08" v-if="orderDetailData!=null">
  <!--<view class='orderKuaidi' wx:if='{{orderDetailData.orderStatus > 3 && orderDetailData.orderStatus < 7 }}'>
      <view> 
         <text>快递名：</text> 
         <text style='color:{{setting.platformSetting.defaultColor}}' >{{orderDetailData.kuaidiName}}</text> 
      </view>
      <view class='orderKuaidi_no'>
        <text>快递单号：</text> 
        <text selectable="true" style='color:{{setting.platformSetting.defaultColor}}'>{{orderDetailData.invoiceNo}}</text>
        <text wx:if="{{orderDetailData.invoiceNo}}" style='padding:0 0.4em;border-radius:0.4em;color:#e24148; border:2rpx solid #e24148; margin-left:0.6em;' bindtap="copyTBL">复制</text>
        <text wx:else style='padding:0 0.4em;border-radius:0.4em;color:#e24148; border:2rpx solid #e24148; margin-left:0.6em;'></text>
      </view>
  </view>
  <view bindtap='showOtherArr' class='editAddr' wx:if='{{orderDetailData.orderStatus < 3}}'>
    <view class='editAddr_text'>修改收货地址</view>
    <image src='https://image1.sansancloud.com/xianhua/2019_12/12/13/50/4_17.jpg?x-oss-process=style/preview_120'></image>
  </view> -->
  <view class="pintuan_bg" :style="'background:' + setting.platformSetting.defaultColor">
     <view class="pintuan_bg_left" v-if="orderDetailData.pintuanRecord.recordStatus!=2">
       <text style="font-size:28rpx;color:#fff">拼单还未成功</text>
       <text style="font-size:20rpx;color:#fff">让小伙伴们都来拼单吧~</text>
     </view>
     <view class="pintuan_bg_left" v-else>
       <text style="font-size:28rpx;color:#fff">拼单成功</text>
       <text style="font-size:20rpx;color:#fff">预计拼单成功后48小时内发货~</text>
     </view>
     <view class="pintuan_bg_right">
        <image class="pintuan_bg_right_img" src="https://image1.sansancloud.com/jianzhan/2018_9/10/18/4/59_988.jpg"></image>
     </view>
  </view>
  <!-- <view class='addrItems2'>
      <image mode="aspectFill" src='https://image1.sansancloud.com/xianhua/2019_12/12/13/49/30_402.jpg?x-oss-process=style/preview_120'></image>
      <view class='addrInfo'>
        <view>
          <text>{{orderDetailData.buyerName}}</text>
          <text class='marginleft'>{{orderDetailData.buyerTelno}}</text>
        </view>
        <text class='font2'>{{orderDetailData.buyerProvince}} {{orderDetailData.buyerCity}} {{orderDetailData.buyerArea}} {{orderDetailData.buyerAddress}}           </text>
      </view>
  </view> -->

  <view class="pintuan_container">
     <view class="share_btn" @tap="showPoster">
        <image class="share_icon" src="https://image1.sansancloud.com/xianhua/2019_1/7/16/50/24_963.jpg"></image>
        <text class="share_text">分享码</text>
     </view>
     <view class="pintuan_tiltle">
       <image class="pintuan_user_img" src="https://image1.sansancloud.com/jianzhan/2018_9/10/19/37/5_305.jpg?x-oss-process=style/preview_120"></image>
       <view class="pintuan_info" v-if="orderDetailData.pintuanRecord.recordStatus!=2">
         <text>待分享，还差</text>
         <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.pintuanRecord.userCountLimit-orderDetailData.pintuanRecord.attendedUserCount}}人</text>
         <text>，剩余</text>
         <time-component ref='productTimeOne' v-if="orderDetailData!=null" :receiveData="orderDetailData.pintuanRecord.endTime"></time-component>
         <!-- <time :data="orderDetailData.pintuanRecord.endTime" v-if="orderDetailData!=null"></time> -->
       </view>
       <view class="pintuan_info" v-else>
         <text>拼单成功</text>
       </view>
     </view>
     <view class="pintuan_users">
       <view class="pintuan_user_list">
         <view class="pintuan_user_item" v-for="(pintuanItem, index) in orderDetailData.pintuanRecord.orders" :key="index">
           <view class="pintuan_user_list_tip" :style="'background:' + setting.platformSetting.defaultColor" v-if="index==0"><text>拼主</text></view>
           <image class="user_head_img" :src="pintuanItem.buyerHeadimg"></image>
         </view>
         <view class="unpintuan_user_item" v-for="(item, index) in orderDetailData.pintuanRecord.userCountLimit-orderDetailData.pintuanRecord.attendedUserCount" :key="index">
           <image class="unuser_head_img" src="https://image1.sansancloud.com/jianzhan/2018_9/10/20/2/33_724.jpg"></image>
         </view>
       </view>
       <button class="pintuan_invitation_button" :style="'background:' + setting.platformSetting.defaultColor" open-type="share" v-if="orderDetailData.pintuanRecord.recordStatus==1">
         <text>邀请好友</text>
       </button>
     </view>
  </view>

  <view class="server_container">
     <view>{{orderDetailData.storageName}}</view>
  </view>
  <view class="cartContainer">                        
    <view class="cartShopName">
      <view class="shop_info">
        <image style="height:50rpx;width:50rpx;margin-right:20rpx;" :src="orderDetailData.shop.shopLogo"></image>
        <text class="font1">{{orderDetailData.shop.shopName}}</text>
      </view>
      <text v-if="orderDetailData.promotionName" class="marginleft vity_tag">{{orderDetailData.promotionName}}</text>
      <text class="color" :style="'color:' + setting.platformSetting.defaultColor">合计:￥ {{orderDetailData.goodsAmount}}</text>
    </view>
    <view class="cartItems" v-for="(orderItem, index) in orderDetailData.orderItems" :key="index" :data-id="orderItem.itemId" @tap="tolinkUrl">
      <view class="itemCheckbox">
        <image mode="aspectFill" :src="orderItem.itemIcon + '?x-oss-process=style/preview'"></image>
      </view>
      <view class="item_infomation">
        <view class="item_infomation_name">{{orderItem.itemName}}</view>
        <view class="item_infomation_name_measure" v-if="!!orderItem.measureCartesianId">{{orderItem.measures}}</view>
        <view class="item_infomation_nums"> 
          <text class="flexCenter">x {{orderItem.itemCount}}</text>
        </view>
        <view class="item_infomation_money" :style="'color:' + setting.platformSetting.defaultColor">单价:￥ {{orderItem.itemPrice}}</view>
      </view>
    </view>
    <!-- <view class='butn_container2'>
      <text>留言</text>
      <text class='Input'>{{orderDetailData.buyerScript}}</text>
    </view> -->
  </view>

  <view class="orderSateContainer ">
    <view class="oooo ">
      <image mode="aspectFill" src="https://image1.sansancloud.com/xianhua/2020_4/8/10/45/30_55.jpg?x-oss-process=style/preview_120"></image>
      <view class="oooo_view"> 
        <view class="orderKuaidi_no font5" v-if="orderDetailData.invoiceNo">
          <text>快递单号: {{orderDetailData.invoiceNo}}</text>
          <text style="padding:0 0.4em;border-radius:0.4em;color:#e24148; border:2rpx solid #e24148; margin-left:0.6em;" @tap="copyTBL">复制</text>
        </view>
        <!-- <text>订单金额: ￥{{orderDetailData.goodsAmount}}</text> -->
        <!-- <text>运费: ￥{{orderDetailData.yunfeiAmount}}</text> -->
        <text>{{orderDetailData.payTypeStr}}: ￥{{orderDetailData.payAmount}}</text>
        <text>下单时间: {{orderDetailData.addTime}}</text>
        <text>支付时间: {{orderDetailData.payTime}}</text>
        <text v-if="orderDetailData.invoiceNo">送货时间: {{orderDetailData.receiveTime}}</text>
        <block v-if="orderDetailData.payStatus == 0"> <text>支付状态: 未支付</text>  </block>
          <block v-if="orderDetailData.payStatus == 1"> <text>支付状态: 已支付</text>  </block>
          <block v-if="orderDetailData.payStatus == 2"> <text>支付状态: 已退款</text>  </block>

      </view>
    </view> 
  
    <block v-if="orderDetailData.easyStatusStr == '作废'"> 
          <text :style="'color:' + setting.platformSetting.defaultColor">已作废</text>
        </block>
        <block v-else-if="orderDetailData.easyStatusStr == '完成'"> 
          <text :style="'color:' + setting.platformSetting.defaultColor">交易成功</text>
        </block>
        <block v-else-if="orderDetailData.easyStatusStr == '待评价'"> 
          <text :style="'color:' + setting.platformSetting.defaultColor">待完成</text>
        </block>
        <block v-else>
           <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.easyStatusStr}}</text> 
        </block>
  </view>

  <!-- <view class='orderTime'>
    <text>订单生成时间: {{orderDetailData.addTime}}</text>
    <text>订单支付时间: {{orderDetailData.payTime}}</text>
    <text>订单送货时间: {{orderDetailData.receiveTime}}</text>
  </view> -->
  
  
   <view class="orderTime2">
    <view class="wuliuItem" v-for="(item, index) in orderDetailData.kuaidiBean.data" :key="index">
      <view style="color:#333">{{item.context}}</view>
      <view class="time">{{item.time}} </view>
    </view>
  </view> 


  
  <!-- <view class='orderTime2'>
    <view class='wuliuItem' wx:for='{{[1,1,1,1,1,1,1,1,1,2,1,11]}}' wx:key='{{index}}'>
      <view>撒打算的撒发生覅以撒福看撒即可放款时间按不付款看阿双方将咖啡开始交话费</view>
      <view class='time'>2018-8-10 22:10:12 </view>
    </view>
  </view> -->

  
</view>
<block v-if="showArr">
  <view class="zhezhao" @tap="closeShowArr"></view>
  <view scroll-y style="height:100%" class="OtherArrContainer">
    <view class="addnewarr" @tap="toaddress_newFun" :style="'color:' + setting.platformSetting.defaultColor">
      <text>新增地址</text>
    </view>
    <view class="addrItems2_now" v-for="(addr, index) in addrArr" :key="index" :data-index="index" @tap="chooseNewAddr">
        <image mode="aspectFit" src="https://image1.sansancloud.com/xianhua/2019_12/12/13/49/30_402.jpg?x-oss-process=style/preview_120"></image>
        <view class>
          <text>{{addr.contactName}} {{addr.telNo}}</text>
          <text class="font2">{{addr.province}} {{addr.city}} {{addr.area}} {{addr.address}}</text>
        </view>
      </view>
  </view>
</block>

<posters-user-info-component :ewmImgUrl="ewmImgUrl" v-if="posterState" @closePoaster="getChilrenPoster"></posters-user-info-component>
<!-- <posters-user-info :ewmImgUrl="ewmImgUrl" v-if="posterState" @closePoaster="getChilrenPoster"></posters-user-info> -->
</view>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      loginUser: null,
      posterState: false,
      orderNo: null,
      orderDetailData: null,
      showArr: false,
      addrArr: null,
      hasAddnewAddr: false,
      ewmImgUrl: ""
    };
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (o) {
    var that = this;
    that.setData({
      setting: getApp().globalData.setting,
      loginUser: getApp().globalData.loginUser
    });
    console.log(o);

    if (!!o.orderNo) {
      that.orderNo = o.orderNo;
      that.setData({
        orderNo: that.orderNo
      });
      that.getOrderDetail(o.orderNo);
    } else {
      wx.navigateBack();
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (this.hasAddnewAddr) {
      this.showOtherArr();
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
    this.getOrderDetail(this.orderNo);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
     * 用户点击右上角分享
     */
  onShareTimeline:function(){
    return this.shareFun()
  },
  onShareAppMessage: function (res) {
    console.log(res);
    return this.shareFun()
  },
  methods: {
    shareFun:function(){
        let id = this.orderDetailData.pintuanRecord.id;
        let shareName = '拼团活动';
        let shareParams = 'pintuanRecordId=' + id;
        console.log("shareParams", shareParams);
        console.log("============ii=========", getApp().globalData.sharePintuan('pintuan_invitation', shareName, shareParams));
        return getApp().globalData.sharePintuan('pintuan_invitation', shareName, shareParams);
    },
    /* 获取地址列表 */
    showOtherArr: function () {
      var customIndex = getApp().globalData.AddClientUrl("/get_login_user_address_list.html");
      var that = this; // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log(res.data);
          wx.hideLoading();
          that.setData({
            addrArr: res.data.result,
            showArr: true
          });
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    chooseNewAddr: function (e) {
      let that = this;
      var addrArr = this.addrArr;
      var index = e.currentTarget.dataset.index;
      var selectAddr = addrArr[index];
      console.log(selectAddr);
      let addrParam = {};
      addrParam.addressId = selectAddr.id;
      addrParam.orderNo = this.orderDetailData.orderNo;
      let customIndex = getApp().globalData.AddClientUrl("/change_order_address.html", addrParam, 'post');
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log(res.data);

          if (res.data.errcode == 0) {
            let orderDetailData = that.orderDetailData;
            orderDetailData.buyerName = selectAddr.contactName;
            orderDetailData.buyerTelno = selectAddr.telNo;
            orderDetailData.buyerProvince = selectAddr.province;
            orderDetailData.buyerCity = selectAddr.city;
            orderDetailData.buyerArea = selectAddr.area;
            orderDetailData.buyerAddress = selectAddr.address;
            that.setData({
              orderDetailData: orderDetailData,
              showArr: false
            });
            wx.showToast({
              title: '地址修改成功'
            });
          }
        },
        fail: function (res) {
          getApp().globalData.loadFail();
        }
      });
      wx.hideLoading();
    },
    closeShowArr: function () {
      this.setData({
        showArr: false
      });
    },
    toaddress_newFun: function () {
      this.setData({
        hasAddnewAddr: true
      });
      wx.navigateTo({
        url: '/pages/add_address/index'
      });
    },
    tolinkUrl: function (e) {
      console.log(e.currentTarget.dataset.id); // product_detail.html?productId= 9219;

      var a = "product_detail.html?productId=" + e.currentTarget.dataset.id;
      getApp().globalData.linkEvent(a);
    },
    getOrderDetail: function (id) {
      let that = this;
      let getParams = {};
      getParams.orderNo = id;
      let customIndex = getApp().globalData.AddClientUrl("/get_order_detail.html", getParams); // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log('-----------orderDetail--------');
          console.log(res.data);
          that.setData({
            orderDetailData: res.data
          });
          wx.hideLoading();
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        },
        complete: function () {
          console.log('=====fail====');
        }
      });
    },
    //物流单号 一键复制的事件
    copyTBL: function () {
      var that = this;
      wx.setClipboardData({
        data: that.orderDetailData.invoiceNo,
        success: function (res) {
          wx.getClipboardData({
            success: function (res) {
              wx.showToast({
                title: '复制成功',
                icon: 'success',
                duration: 2000
              });
            }
          });
        }
      });
    },

    // 关闭海报
    getChilrenPoster(e) {
      let that = this;
      that.setData({
        posterState: false
      });
    },

    showPoster: function () {
      let that = this;
      console.log('===showPoster====', that.loginUser.id);

      if (that.loginUser && that.loginUser.platformUser.id) {
        let ewmImgUrl = getApp().globalData.getQrCode({
          type: "pin_tuan",
          id: that.orderDetailData.pintuanRecord.id
        });
        that.setData({
          posterState: true,
          ewmImgUrl: ewmImgUrl
        });
      } else {
        wx.showModal({
          title: '提示',
          content: '您还未登录，点击【确定】重新加载',
          success: function (res) {
            if (res.confirm) {
              that.getSessionUserInfo();
            } else if (res.cancel) {}
          }
        });
      }
    },
    getSessionUserInfo: function () {
      var that = this;
      var postParamUserBank = getApp().globalData.AddClientUrl("/get_session_userinfo.html");
      wx.request({
        url: postParamUserBank.url,
        data: postParamUserBank.params,
        header: getApp().globalData.headerPost,
        success: function (res) {
          console.log(res.data);

          if (res.data.errcode == '0') {
            that.setData({
              loginUser: res.data.relateObj
            });
            getApp().globalData.loginUser = res.data.relateObj;
          } else {
            wx.showToast({
              title: res.data.errMsg,
              image: '/images/icons/tip.png',
              duration: 1000
            });
          }
        },
        fail: function (res) {
          console.log(res.data);
        },
        complete: function (res) {
          wx.stopPullDownRefresh();
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style scoped>
@import "./index.css";
</style>